const path = require("path")
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 开两个线程编译
const threads = 2;
function getStyleLoader(pre) {
  return [
    "style-loader", // 将js中的css通过style标签添加html文件中
    "css-loader",// 将css资源编译成commonjs的模块到js中,
    pre
  ].filter(Boolean) // 顺序从右到左
}
module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径
  // 输出
  output: {
    // 输出路径 当前文件目录
    // 开发模式没有输出
    path: undefined, // 绝对路径
    // 入口文件打包输出名称
    filename: "static/js/[name].js",
    // import导入的js打包命名
    chunkFilename: "static/js/[name].chunk.js",
    // 图片、字体等通过type:asset处理资源命名方式
    assetModuleFilename: "static/images/[hash:10][ext][query]",
    clean: true, // 清空上次打包结果
  },
  // 加载器
  module: {
    rules: [
      {
        // 每个文件之被一个loader处理
        oneOf: [
          // loader配置
          // css
          {
            test: /\.css$/, // 检测.css文件
            use: getStyleLoader()
          },
          // less
          {
            test: /\.less$/,
            // loader: 'xx'   只能使用一个loader
            // use: [] 可以使用多个loader
            use: getStyleLoader('less-loader')
          },
          // scss
          {
            test: /\.s[ac]ss$/i,
            use: getStyleLoader('sass-loader')
          },
          // styl
          {
            test: /\.styl$/,
            // 将 Stylus 文件编译为 CSS
            use: getStyleLoader('stylus-loader')
          },
          // png,jpg.gif,svg
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: 'asset',
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024 // 10kb
              }
            },
            // generator: {
            //   // hash:10 哈希取前10位
            //   filename: 'static/images/[hash:10][ext][query]'
            // }
          },
          // 字体文件
          {
            test: /\.(ttf|woff2?)$/,
            type: 'asset/resource',
            // generator: {
            //   // hash:10 哈希取前10位
            //   filename: 'static/fonts/[hash:10][ext][query]'
            // }
          },
          {
            test: /\.js$/,
            /**
             * 排除node_modules
             * 只包含include
             * exclude: /(node_modules|bower_components)/,
             * 两种方法只能用其中一种不可以同时使用
             * **/
            // 只处理src下的文件
            include: path.resolve(__dirname,'../src'),
            use: [
              // threads
              {
                loader: 'thread-loader',
                options: {
                  // 开启多进程
                  works: threads
                }
              },
              // babel
              {
                loader: 'babel-loader',
                options: {
                  cacheDirectory: true, // 开启babel缓存
                  cacheCompression: false , // 关闭缓存文件压缩
                  plugins: ["@babel/plugin-transform-runtime"]
                }
              }
            ]
          }
        ]
      }
    ]
  },
  // 插件
  plugins: [
    // 插件配置
    new ESLintPlugin({
      // 检测文件
      context: path.resolve(__dirname,"../src"),
      // 排除资源包文件
      exclude: 'node_modules',
      // 开启多进程
      threads,
    }),// eslint
    new HtmlWebpackPlugin({
      /**
       *  模板文件以次路径文件为模板
       *  结构与原来一直，自动引入打包资源
       */
      template: path.resolve(__dirname,"../public/index.html")
    })
  ],
  /**
   * 模式
   * 开发模式 development
   * 生产模式
   */
  mode: "development",
  // 开发服务器 不输出文件，再内存中编译打包
  devServer: {
    host: 'localhost', // 域名
    port: '3000', // 端口
    open: true, // 是否打开浏览器
    hot: true, // 默认开始HMR 热模块替换 只重新加载某个模块
  },
  // 具体到行错误
  devtool: "cheap-module-source-map"
}